@charset "UTF-8";

@import "../core/reset";

body {
  background: white;
}

header {
  width: 100%;
  height: .4rem;
  background: #de4943;
  @include flexbox();

  a {
    width: .3rem;
    height: .4rem;
    background: url("../images/headback.jpg");
    margin-left: .08rem;
  }

  h2 {
    @include flex(1);
    text-align: center;
    color: white;
    line-height: 40px;
  }

  span {
    width: .3rem;
    height: .4rem;
    background: url("../images/headIcon.png") no-repeat;
    background-position: -150px 6px;
    margin-right: .08rem;
  }

}


.searchMainBody {

  #searchBarWrapper {
    height: .5rem;
    background: #e2e2e2;
    width: 100%;
    padding-top: .1rem;
    #searchBarContainer {
      width: 90%;
      height: .3rem;
      margin: auto;
      @include flexbox();
      @include flex-direction(row);
      input {
        height: 100%;
        @include flex(1);
        padding: 0;
        margin: 0;
        outline: 0;
        border: 0;
        padding-left: 0.04rem;

      }

      a {
        height: 100%;
        width: .7rem;
        background: #de4943;
        color: white;
        text-align: center;
        line-height: .3rem;
      }

    }
  }

  .LogoList {
    width: 100%;
    height: .45rem;
    background: #efefef;
    color: #848d96;
    padding-top: .05rem;
    display: none;
    ul {
      @include flexbox();
      @include flex-direction(row);
      li {
        width: 25%;
        a {
          width: 100%;
          height: 100%;
          display: block;
          color: #848d96;
          i {
            width: .24rem;
            height: .22rem;
            margin: 0 auto 0;
            background-position: -5px -10px;
            background: url("../images/headIcon.png") no-repeat;
            background-position: -5px -5px;
            display: block;
          }
          div {
            text-align: center;
          }
        }

        &:nth-child(2) {
            a {
              i {
                background-position: -37px -5px;
              }
            }
        }

        &:nth-child(3) {
            a {
              i {
                background-position: -72px -5px;
              }
            }
        }

        &:nth-child(3) {
            a {
              i {
                background-position: -113px -5px;
              }
            }
        }

      }
    }
  }

  #searchItemListWrapper {

    @include flexbox();
    @include flex-wrap(wrap);

    li {
      width: 33.33vw;
      height: .81rem;
      @include border(0 1px 1px 0);
      text-align: center;

      i {
        width: .36rem;
        height: .35rem;
        display: block;
        margin: .07rem auto;
        background: url("../images/selectIcon0314.png") no-repeat;
        background-position: 0 0;
      }

      div {
        color: black;
      }

      &:nth-child(2) {
        i {
          background-position: -80px 0;
        }
      }

      &:nth-child(3) {
        i {
          background-position: -165px 1px;
        }
      }

      &:nth-child(4) {
        i {
          background-position: 0 -70px;
        }
      }

      &:nth-child(5) {
        i {
          background-position: -84px -70px;
        }
      }

      &:nth-child(6) {
        i {
          background-position: -165px -70px;
        }
      }

    }

  }



}
